import React from 'react';
import '../styles/components.css';

const ContactDropdown = ({ contacts, selectedContact, onContactChange }) => {
  const selectedContactData = contacts.find(c => c.id == selectedContact);

  return (
    <div className="form-group">
      <label htmlFor="contact-select" className="form-label">
        <span className="label-icon">👤</span>
        选择紧急联系人
      </label>
      <select 
        id="contact-select"
        value={selectedContact || ""}
        onChange={(e) => onContactChange(e.target.value)}
        className="contact-dropdown"
      >
        <option value="">-- 请选择紧急联系人 --</option>
        {contacts.map(contact => (
          <option key={contact.id} value={contact.id}>
            {contact.name} ({contact.relationship}) - {contact.phone}
          </option>
        ))}
      </select>
      
      {selectedContactData && (
        <div className="selected-contact-info">
          <div className="contact-avatar">
            {selectedContactData.name.charAt(0)}
          </div>
          <div className="contact-details">
            <strong>{selectedContactData.name}</strong>
            <span>{selectedContactData.relationship} • {selectedContactData.phone}</span>
          </div>
        </div>
      )}
    </div>
  );
};

export default ContactDropdown;